<script>
export default {
	data() {
		return {
			// 用户信息
			userInfo: {

			},
			showEditUsername: false,
			editUsernameForm: {
				username: ''
			},
			xinshou:false,
			caozuo:false
		}
	},
	created() {
		this.getUserInfo()
	},
	computed: {
		basicData() {
			return this.$store.state.basicData
		}
	},
	mounted() {
		this.getUserInfo();
	},
	methods: {
		xinshou_action(){
			this.xinshou = true
		},
		caozuo_action(){
			this.caozuo = true
		},
		async getUserInfo() {
			const res = await this.http("get", "/api/user/user_info", {})
			this.userInfo = res.data
		},
		gotoPage(e) {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				uni.navigateTo({
					url: e
				})
			}
			
		},
		gotoPage2(e){
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				if((this.userInfo.station==null)||(this.userInfo.station.name==null)){
					uni.navigateTo({
						url: '/pages/my/myinfo'
					})
				}else{
					uni.navigateTo({
						url: e
					})
				}
			}
		},
		gotoPage3(e) {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				if(this.userInfo){
					if(this.userInfo.cooperate){
						if(this.userInfo.cooperate.status==0){
							this.toast('审核中，请耐心等待客服回复')
							return false
						}
					}
				}
				uni.navigateTo({
					url: e
				})
			}
		},
		
		
		
		updateAvatar() {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['album', 'camera'],
					success: (res) => {
						uni.uploadFile({
							url: "https://app.yinuoxinnengyuan.cn/index.php/api/index/uploads",
							filePath: res.tempFilePaths[0],
							name: "file",
							success: async (res) => {
								res = JSON.parse(res.data);
								const res2 = await this.http("post", "/api/index/edit_user", {
									headimg: res.data.pic_path
								})
								if (res2.code == 200) {
									this.userInfo.headimg = res.data.pic_path;
								}
								this.toast(res2.message);
							}
						})
					}
				})
			}
		},
		// 提交用户名修改
		async submitUsername() {
			if(uni.getStorageSync("id")==''){
				this.toast('请先登录')
				
				setTimeout(function(){
					uni.redirectTo({
						url:'/pages/start/splash'
					})
				},2000)
			}else{
				// 表单验证
				if (!this.editUsernameForm.username.trim()) {
					this.toast('请输入用户名')
					return
				}
				if (this.editUsernameForm.username.length > 20) {
					this.toast('用户名不能超过20个字符')
					return
				}

				try {
					const res = await this.http('post', '/api/index/edit_user', {
						username: this.editUsernameForm.username
					})

					if (res.code === 200) {
						this.userInfo.username = this.editUsernameForm.username
						this.showEditUsername = false
						this.toast('修改成功')
						this.editUsernameForm.username = ''
					} else {
						this.toast(res.message)
					}
				} catch (error) {
					this.toast('修改失败，请重试')
					console.error('修改用户名失败:', error)
				}
			}
		},
		zanwei(){
			uni.showToast({
				title:'暂未开放'
			})
		},
		loginout(){
			uni.showToast({
				title:'退出登录'
			})
			setTimeout(function(){
				uni.clearStorageSync()
				uni.reLaunch({
					url:'/pages/start/splash'
				})
			},2000)
			
		}
	}
}
</script>
<template>
	<view class="my-content">
		<!-- 修改用户名模态窗 -->
		<view class="popup-mask" v-if="showEditUsername">
			<view class="popup-content">
				<view class="dialog-header">
					<text class="title">修改用户名</text>
					<text class="close" @click="showEditUsername = false">×</text>
				</view>
				<view class="dialog-body">
					<input type="text" v-model="editUsernameForm.username" placeholder="请输入新的用户名"
						class="username-input" />
				</view>
				<view class="dialog-footer">
					<button class="btn cancel-btn" @click="showEditUsername = false">取消</button>
					<button class="btn confirm-btn" @click="submitUsername">确认</button>
				</view>
			</view>
		</view>

		<view class="my-one">
			<image class="one-bg" src="../../static/my/bg1.png" mode="widthFix"></image>
			<view class="one-con">
				<view class="my-img" @click="updateAvatar()">
					<image :src="userInfo.headimg || '/static/pic/logo.png'" mode="widthFix"></image>
				</view>
				<text @click="showEditUsername = true">{{ userInfo.username }}</text>

			</view>
		</view>
		<view class="my-other">
			<text class="my-title">我的钱包</text>
			<view class="cz-con" @click="gotoPage('/pages/my/recharge')">
				<image src="../../static/my/icon5.png" mode="widthFix"></image>
				<text>去充值</text>
			</view>
			<view class="other-box">
				<view class="other-l" style="position: relative;" @click="gotoPage('/pages/my/withdrawal')">
					<image src="../../static/my/icon4.png" mode="widthFix"></image>
					<text>提现</text>
					<text v-if="userInfo.tx_count>=1" style="position: absolute;top: -5px;left: 100%; padding: 5rpx 15rpx; font-size: 18rpx; background-color: red;color: white; border-radius: 50rpx;">{{userInfo.tx_count}}</text>
				</view>
				<view class="other-c">
					<text class="big-text">{{ userInfo.amount }}</text>
					<text>可用余额</text>
				</view>
				<view class="other-r" @click="gotoPage('/pages/my/balance?type=0')">
					<text>余额明细</text>
					<image src="../../static/my/icon6.png" mode="widthFix"></image>
				</view>
			</view>
		</view>

		<!-- 物业和个人桩有管理后台   -->
		<view class="my-two" v-if="userInfo.is_admin == 1">
			<image class="two-bg" src="../../static/my/img1.png" mode="widthFix"></image>
			<view class="two-con" @click="gotoPage2('/pages/my/backend')">
				<text>管理后台</text>
				<image src="../../static/my/icon2.png" mode="widthFix"></image>
			</view>
		</view>

		<view class="my-two" v-else>
			<image class="two-bg" src="../../static/my/img1.png" mode="widthFix"></image>
			<view class="two-con" @click="gotoPage3('/pages/my/apply')">
				<text>招商加盟</text>
				<image src="../../static/my/icon2.png" mode="widthFix"></image>
			</view>
		</view>
		<view class="my-three">
			<text class="my-title">我的爱车</text>

			<view class="three-con" @click="gotoPage('/pages/my/addCar?is_my=1')">
				<image src="../../static/my/icon3.png" mode="widthFix"></image>
				<text>添加爱车</text>
				<image class="three-img" src="../../static/my/img2.png" mode="widthFix"></image>
			</view>

		</view>
		<view class="my-four">
			<text class="my-title">我的充电</text>
			<view class="four-con">
				<view class="four-item" @click="go('/pages/order/order')">
					<image src="../../static/my/my1.png" mode="widthFix"></image>
					<text>订单</text>
				</view>
				<view class="four-item" @click="gotoPage('/pages/my/carList')">
					<image src="../../static/my/my2.png" mode="widthFix"></image>
					<text>爱车</text>
				</view>
				<view class="four-item" @click="gotoPage('/pages/my/collect')">
					<image src="../../static/my/my3.png" mode="widthFix"></image>
					<text>收藏</text>
				</view>
				<view class="four-item" @click="gotoPage('/pages/my/commonUse')">
					<image src="../../static/my/my4.png" mode="widthFix"></image>
					<text>常用</text>
				</view>
			</view>
		</view>
		
		<div class="mask" v-show="xinshou" style="align-items: flex-end;">
			<div class="w-full p-30 bg-white" style="height: 100vh; overflow:auto">
				<div>
					<div class="center fz30 font-bold">
						{{basicData.xinshou.title}}
					</div>
					<div class="mt-30" v-html="basicData.xinshou.content"></div>
				</div>
				<button class="mt-50" @click="xinshou=false">关闭</button>
			</div>
		</div>
		<div class="mask" v-show="caozuo" style="align-items: flex-end;">
			<div class="w-full p-30 bg-white" style="height: 100vh;overflow:auto">
				<div>
					<div class="center fz30 font-bold">
						{{basicData.caozuo.title}}
					</div>
					<div class="mt-30" v-html="basicData.caozuo.content"></div>
				</div>
				<button class="mt-50" @click="caozuo=false">关闭</button>
			</div>
		</div>
		
		
		<view class="my-four">
			<text class="my-title">我的服务</text>
			<view class="four-con">
				<view class="four-item" @click="xinshou_action()">
					<image src="../../static/my/my5.png" mode="widthFix" ></image>
					<text style="font-size: 28rpx;">新手指南</text>
				</view>
				<view class="four-item" @click="caozuo_action()">
					<image src="../../static/my/my6.png" mode="widthFix" ></image>
					<text style="font-size: 28rpx;">操作说明</text>
				</view>
				<view class="four-item" @click="gotoPage('/pages/my/feedback')">
					<image src="../../static/my/my7.png" mode="widthFix"></image>
					<text style="font-size: 28rpx;">意见反馈</text>
				</view>
				<view class="four-item" style="position: relative; height: 60px;width: 64px;">
					<button open-type="contact" type="default" style="border:0;padding:0;display: block;width: 64px; height: 60px;position: relative; background-color: transparent;">
						<image src="../../static/my/my8.png" mode="widthFix" style="position: absolute;top: 0%;left: 20%;"></image>
						<text style="position: absolute;top: 51%;left: 0%;font-size: 28rpx;">我的客服</text>
					</button>
				</view>
			</view>
		</view>
		<button class="logout" @click="loginout">退出登录</button>
	</view>
</template>



<style lang="less">
	button:active {
	  outline: none;
	}
	button {
	  box-shadow: none; /* 初始状态下没有阴影 */
	}
	button:focus {
	  outline: none;
	}
	button {
	  -webkit-tap-highlight-color: transparent; /* iOS上点击时的背景高亮 */
	}
	button::after{
		border: none;
	}
	
	.mask {
		position: fixed;
		width: 100%;
		height: 100%;
		left: 0;
		top: 0;
		background-color: rgba(0, 0, 0, 0.5);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 10;
	}
.my-content {
	width: 100%;
	padding: 30upx;
	box-sizing: border-box;

	.my-title {
		font-size: 36upx;
		color: #000;
		display: block;
		font-weight: 500;
	}

	.my-other {
		width: 100%;
		border-radius: 16upx;
		overflow: hidden;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;
		position: relative;

		.cz-con {
			position: absolute;
			top: 20upx;
			right: 20upx;
			display: flex;
			align-items: center;

			image {
				width: 32upx;
				height: auto;
				display: block;
				margin-right: 5upx;
			}

			text {
				font-size: 24upx;
				color: #FF587D;
			}
		}

		.other-box {
			width: 100%;
			display: flex;
			align-items: flex-end;
			justify-content: space-between;

			.other-l {
				display: flex;
				align-items: center;

				image {
					width: 32upx;
					height: auto;
					display: block;
					margin-right: 5upx;
				}

				text {
					font-size: 24upx;
					color: #FF8F1F;
				}
			}

			.other-c {
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;
				margin: 10upx 0;

				.big-text {
					font-size: 72upx;
					color: #000;
					font-weight: 500;
				}

				text {
					font-size: 28upx;
					color: #A6A6A6;
				}
			}

			.other-r {
				display: flex;
				align-items: center;

				image {
					width: 32upx;
					height: auto;
					display: block;
					margin-left: 5upx;
				}

				text {
					font-size: 24upx;
					color: #3662EC;
				}
			}
		}
	}

	.my-one {
		width: 100%;
		background-color: #000;
		border-radius: 16upx;
		overflow: hidden;
		position: relative;
		margin-bottom: 20upx;

		.one-bg {
			width: 100%;
			height: auto;
			display: block;
		}

		.one-con {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			display: flex;
			align-items: center;
			padding: 20upx 40upx;
			box-sizing: border-box;

			text {
				font-size: 36upx;
				color: #fff;
				font-weight: 600;
			}

			.set-btn {
				width: 48upx;
				height: auto;
				position: absolute;
				right: 20upx;
				top: 20upx;
			}

			.my-img {
				width: 160upx;
				height: 160upx;
				border-radius: 50%;
				overflow: hidden;
				margin-right: 40upx;

				image {
					width: 100%;
					height: auto;
					display: block;
				}
			}
		}
	}

	.my-two {
		width: 100%;
		border-radius: 16upx;
		overflow: hidden;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		position: relative;

		.two-bg {
			width: 100%;
			height: auto;
			display: block;
		}

		.two-con {
			position: absolute;
			width: 100%;
			height: 100%;
			top: 0;
			left: 0;
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 0 20upx;
			box-sizing: border-box;

			text {
				font-size: 52upx;
				color: #208BD9;
				font-weight: bold;
				display: block;
				width: 80%;
				text-align: center;
			}

			image {
				width: 80upx;
				height: auto;
			}
		}
	}

	.my-three {
		width: 100%;
		border-radius: 16upx;
		overflow: hidden;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;

		.three-con {
			width: 100%;
			background: #FFFBDB;
			border-radius: 16upx;
			display: flex;
			align-items: center;
			padding: 36upx 40upx;
			position: relative;
			margin-top: 20upx;
			box-sizing: border-box;

			image {
				width: 48upx;
				height: auto;
				display: block;
				margin-right: 5upx;
			}

			text {
				font-size: 44upx;
				color: #FF8F1F;
				font-weight: 500;
			}

			.three-img {
				position: absolute;
				right: 0;
				bottom: 0;
				width: 310upx;
				height: auto;
			}
		}
	}

	.my-four {
		width: 100%;
		border-radius: 16upx;
		overflow: hidden;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		margin-bottom: 20upx;
		padding: 30upx;
		box-sizing: border-box;

		&:last-of-type {
			.four-item image {
				width: 72upx !important;
			}
		}

		.four-con {
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-around;
			margin-top: 20upx;

			.four-item {
				display: flex;
				flex-flow: column;
				align-items: center;
				justify-content: center;

				image {
					width: 80upx;
					height: auto;
					display: block;
					margin-bottom: 5upx;
				}

				text {
					font-size: 32upx;
					color: #3D3D3D;
				}
			}
		}
	}

	.logout {
		width: 100%;
		height: 80upx;
		border-radius: 16upx;
		background: #FF0000;
		box-shadow: 0px 8px 20px 0px rgba(0, 0, 0, 0.3);
		color: #fff;
		line-height: 80upx;
		font-size: 44upx;
		font-weight: 700;
		margin-top: 40upx;
	}

	// 模态窗样式
	.popup-mask {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		background: rgba(0, 0, 0, 0.6);
		z-index: 999;
		display: flex;
		align-items: center;
		justify-content: center;

		.popup-content {
			width: 80%;
			background: #fff;
			border-radius: 16upx;
			overflow: hidden;

			.dialog-header {
				height: 88upx;
				display: flex;
				align-items: center;
				justify-content: space-between;
				padding: 0 30upx;
				border-bottom: 1px solid #eee;

				.title {
					font-size: 32upx;
					font-weight: 500;
					color: #333;
				}

				.close {
					font-size: 48upx;
					color: #999;
					padding: 0 20upx;
				}
			}

			.dialog-body {
				padding: 30upx;

				.username-input {
					width: 100%;
					height: 80upx;
					border: 1px solid #eee;
					border-radius: 8upx;
					padding: 0 20upx;
					font-size: 28upx;
				}
			}

			.dialog-footer {
				padding: 20upx 30upx;
				display: flex;
				justify-content: space-between;
				gap: 20upx;

				.btn {
					flex: 1;
					height: 80upx;
					border-radius: 8upx;
					font-size: 32upx;
					font-weight: 500;
					line-height: 80upx;
				}

				.cancel-btn {
					background: #F5F5F5;
					color: #666;
				}

				.confirm-btn {
					background: #3662EC;
					color: #fff;
				}
			}
		}
	}
}
</style>